<template>
  <div class="boxTitle boxMargin">
    <div class="title ">
      <h1 style="">{{pageData.solvePlanBase.planAdvantageBack}}</h1>
      <h2>{{pageData.solvePlanBase.planAdvantage}}</h2>
    </div>
  </div>

  <div class="dataList">
    <div class="item "
         v-for="(item , index) in pageData.advantageLists"
         :class="{case1: index%2 == 0, case2: index%2 == 1}"
         :style="{ 'background': index%2 == 1 ? 'url('+ item.backImgUrl +') no-repeat' : '#fff'}"
         style="background-size: 100% 100%;"
    >
      <div class="img">
        <img :src="item.iconImgUrl">
      </div>
      <div class="title">{{item.title}}</div>
      <div class="number">
        <span>{{item.number}}</span>
      </div>
    </div>
  </div>

</template>

<script setup>
  import {ref} from 'vue'

  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {
      },
    }
  })
</script>

<style scoped lang="scss">

  @media screen and (max-width: 1079px) {
    .boxMargin {
      margin-top: 10px;
    }
    .dataList {
      display: flex; flex-wrap: wrap;
      .item {
        width: calc( 50% - 5px ); margin-top: 10px; padding: 0 10px 20px;
        &:nth-child(2n){
          margin-left: 5px;
        }
        &:nth-child(2n+1){
          margin-right: 5px;
        }
        .img {
          width: 50px;
          height: 50px;
          margin: 15px auto 0;
          img {
            width: 100%;
            display: block;
          }
        }
        .title {
          text-align: center;
          font-size: 14px;
          padding-top: 10px;
        }
        .number {
          text-align: center;
          font-size: 14px;
          padding-top: 15px;
          span {
            border-bottom: 2px solid #fff;
            padding-bottom: 5px;
          }
        }

        &.case1 {
          box-shadow: 0 0 10px #ddd;
          span {
            border-bottom: 2px solid #1A1A25;
          }
        }
        &.case2 {
          color: #fff;
          /*background: url('@/assets/images/solvePlan/marketBg.png') no-repeat;*/
          /*background-size: 100% 100%;*/
        }
      }

    }
  }

  @media screen and (min-width: 1080px) {

    .boxMargin {
      margin-top: 4vw;
    }

    .dataList {
      display: flex;
      gap: 1vw;

      .item {
        flex: 1; padding: 0 1vw 1.5vw;
        transition: all 0.5s;
        &:hover{
          transform: translateY(-1vw);
        }
        .img {
          width: 3.96vw;
          height: 3.96vw;
          margin: 1.8vw auto 0;
          img {
            width: 100%;
            display: block;
          }
        }
        .title {
          text-align: center;
          font-size: 0.9vw; color: #1A1A25;
          padding-top: 1vw; font-weight: bold;
        }
        .number {
          text-align: center;
          font-size: 1.2vw;
          padding-top: 1.8vw; font-weight: bold;
          span {
            border-bottom: 2px solid #fff;
            padding-bottom: 0.5vw;
          }
        }

        &.case1 {
          box-shadow: 0 0 10px #ddd; color: #69696F;
          span {
            border-bottom: 2px solid #69696F;
          }
        }
        &.case2 {
          color: #fff;
          /*box-shadow: 0 0 3px #1027EF;*/
          /*background-color: #1027EF;*/
          /*background: url('@/assets/images/solvePlan/marketBg.png') no-repeat;*/
          /*background-size: 100% 100%;*/
          border: 0;
          .title{
            color: #fff;
          }
        }
      }

    }

  }



</style>
